<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1986880_ygsb5achal.css">
    <link rel="stylesheet" href="../../css/normalize.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>发布委托</title>
    <style>
        .main{
            padding-top: 46px;
            padding-bottom: 73px;
        }
        .header{
            height: 46px;
        }
        .footer{
            height: 73px;
        }
        .footer-beian{
            background-color: #fff;
        }
        .navs{
            padding: 17px 0;
            width: 100%;
            overflow: hidden;
        }
        .navs .logo{
            width: 218px;
            height: 45px;
            background: #4C9AFE;
            border-radius: 5px;
        }
        .navs .nav-list{
            height: auto;
        }
        .navs .nav-list .nav-item{
            margin-left: 15px;
        }
        .navs .nav-list .nav-item .iconfont{
            font-size: 14px;
            color:#999999;
        }
        .navs .nav-list .nav-item span{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        .navs .nav-list .nav-item.active .iconfont,.navs .nav-list .nav-item.active span{
            color: #4C9AFE;
        }
        .board{
            width: 730px;
            height: auto;
            margin: 32px auto 20px;
        }
        .board .btns{
            width: 260px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: #4C9AFE;
            border-radius: 25px;
            margin: 40px auto 0;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            cursor: pointer;
        }
        .address{
            overflow: hidden;
            padding: 20px 0;
        }
        .address .icondingweiweizhi{
            font-size: 16px;
            color: #4C9AFE;
        }
        .address .left span{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #4C9AFE;
        }
        .address .right{
            width: 300px;
            position: relative;
        }
        .address .right span{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        input[type=checkbox]{
            width: 15px;
            height: 15px;
            visibility:hidden;
            margin-right:10px;
        }
        input[type=checkbox]:after{
            width: 100%;
            height: 100%;
            content: " ";
            background-color:#5677FC;
            display: inline-block;
            visibility: visible;
            border-radius: 2px;
            margin-top: 2px;
        }
        /**选中后的样式**/
        input[type=checkbox]:checked:after {
            /**详性 请谷歌，（唉，现在只能百度了）HTML特殊字符大全（unicode字符集）**/
            content: "\2713";/*UNICODE中对号*/
            font-weight: bold;
            color: #fff;
        }
        .wins-title{
            width:100%;
            overflow: hidden;
            padding: 36px 0 20px;
        }
        .wins-title .left{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333; 
        }
        .wins-title .right{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        .start-xs{
            width: 100%;
            height: auto;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .tips{
            width: 100%;
            height: auto;
            padding: 15px 0;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        .board-box{
            width: 100%;
            height: auto;
            background: #FFFFFF;
            border-radius: 5px;
            padding: 0 40px;
        }
        .board-box .title{
            width: 100%;
            padding: 40px 0;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
        }
        .title-a{
            width: 100%;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .title-a .left{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
        }
        .title-a .right{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        .title-a .right .iconfont{
            font-size: 14px;
            color: #999999;
            font-weight: bold;
        }
        .title-a-ipt{
            width: 650px;
            height: 40px;
            background: #F7F7F7;
            border-radius: 5px;
            padding: 0 20px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #222;
            margin-bottom: 40px;
        }
        .title-a-ipt::placeholder{
            color: #999999;
        }
        .title-b{
            width: 650px;
            height: 160px;
            background: #F7F7F7;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 40px;
        }
        .title-b-txt{
            width: 100%;
            height: 100%;
            resize: none;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #222;
        }
        .title-b-txt::placeholder{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        .ipt-box{
            width: 100%;
            height: auto;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .ipt-box .spa{
            width: 100px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
        }
        .ipt-box .ipt{
            width: 550px;
            height: 40px;
            background: #F7F7F7;
            border-radius: 5px;
            padding: 0 20px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #222;
        }
        .ipt-box .ipt::placeholder{
            color: #999999;
        }
        .btn{
            width: 260px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: #4C9AFE;
            border-radius: 25px;    
            margin: 40px auto;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="header">
            <div class="wrapper">
                <div class="row topmenus">
                    <div class="col header-address fl">
                        <i class="iconfont icondingweiweizhi"></i>
                        <span class="txt">郑州</span>
                        <i class="iconfont icondown-hollow"></i>
                    </div>
                    <div class="col header-menuns fr">
                        <a href="" class="txt fr">手机APP</a>
                        <a href="" class="txt fr">律师入驻</a>
                        <a href="" class="notice fr">
                            <i class="iconfont icontongzhi"></i>
                            <div class="cirle"></div>
                        </a>
                        <div class="lg fr txt">
                            欢迎，请
                            <a href="https:www.baidu.com" class="login">登录</a>
                            ｜ <a href='' class='resign'>免费注册</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="wrapper">
                <div class="navs">
                    <img src="../../images/lawyer.png" class="logo fl">
                    <div class="nav-list fr">
                        <div class="nav-item fl active">
                            <i class="iconfont icontijiaowenti2"></i>
                            <span>发布委托 > </span>
                        </div>
                        <div class="nav-item fl">
                            <i class="iconfont icontongzhi"></i>
                            <span>系统通知 > </span>
                        </div>
                        <div class="nav-item fl">
                            <i class="iconfont iconhuifu"></i>
                            <span>查看回复 > </span>
                        </div>
                        <div class="nav-item fl">
                            <i class="iconfont iconxuanding"></i>
                            <span>选定律师 > </span>
                        </div>
                        <div class="nav-item fl">
                            <i class="iconfont iconqiandinghetong"></i>
                            <span>签订合同 > </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="board">
                <div class="tips">提交案件，多位律师免费分析案情，提供方案：律师费自主协商，经济透明。</div>
                <div class="board-box">
                    <div class="title">发布委托</div>
                    <div class="title-a">
                        <div class="left fl">案件标题</div>
                        <div class="right fr">交通肇事 <i class='iconfont icondown-hollow'></i></div>
                    </div>
                    <input type="text" class="title-a-ipt" placeholder="一句话概括需求">
                    <div class="title-a">
                        <div class="left fl">案件标题</div>
                    </div>
                    <div class="title-b">
                        <textarea class="title-b-txt" placeholder="请在此详细描述问题详情，律师根据详情为您提供专业解答"></textarea>
                    </div>
                    <div class="ipt-box">
                        <div class="spa fl">联系方式</div>
                        <input type="text" class="ipt" class="fr" placeholder="请输入您的联系方式">
                    </div>
                    <div class="ipt-box">
                        <div class="spa fl">涉案金额</div>
                        <input type="text" class="ipt" class="fr" placeholder="请输入您的联系方式">
                    </div>
                    <div class="address">
                        <div class="left fl">
                            <i class="iconfont icondingweiweizhi"></i>
                            <span>河南 郑州</span>
                        </div>
                        <div class="right fr">
                            <label class="fr">匿名提交</label>
                            <input class="fr" type="checkbox" checked="value">
                        </div>
                    </div>
                </div>
                <div class="btn">立即发布</div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-beian">
                <div class="wrapper">
                    律师网版权所有 20205-2020 粤ICP备10231287号-5 粤公安网安备 44010602222号 增值电信业务经营许可证(ICP)粤B2-20100586
                </div>
            </div>
        </div>
    </div>
</body>

</html>